<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="more">
			<view class="container_hader">
				<view class="hader">
					<view class="hader_item">
						<view class="hader_tit">正常状态</view>
						<view class="number" style="color:rgba(255, 87, 51, 1);">{{ cardnum.normal_number==null?'0': cardnum.normal_number}}<span class="span1">个</span></view>
					</view>
					<view class="hader_item">
						<view class="hader_tit">未审核</view>
						<view class="number">{{ cardnum.unaudited_number==null?'0': cardnum.unaudited_number }}<span class="span1">个</span></view>
					</view>
					<view class="hader_item">
						<view class="hader_tit">未通过</view>
						<view class="number">{{ cardnum.lose_number==null?'0': cardnum.lose_number }}<span class="span1">个</span></view>
					</view>
					<view class="hader_item" style="border: none;">
						<view class="hader_tit">已到期</view>
						<view class="number">{{ cardnum.expired_number==null?'0': cardnum.expired_number }}<span class="span1">个</span></view>
					</view>
				</view>
			</view>
			<view class="main_null" v-if="total==0">
				<image class="img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/wxx.png"></image>
				<view class="null_text">暂无卡片创建记录</view>
				<view class="null_card" @tap="toindex">创建卡片</view>
			</view>
			<view class="main" v-else>
				<!-- 未激活的的 -->
				<view class="notActive" v-for="(item,index) in cardListvalue" :key="index">
					<view class="title">
						<view class="notActive_tit" v-show="item.card_state == 0||item.card_state == 2">未激活卡片</view>
						<view class="notActive_tit" v-show="item.card_state == 1||item.card_state == 3">{{ item.exp_last_time }} 到期</view>
						<view class="tit_fail" v-show="item.card_state == 2">审核失败</view>
						<view class="Unaudited" v-show="item.card_state == 0">待审核 生成后24小时有效</view>
						<view class="normal" v-show="item.card_state == 1">卡片正常</view>
						<view class="overdue" v-show="item.card_state == 3">卡片已到期，请激活</view>
					</view>
					<Card :Listitem="item" @tap="lookimg(item.card_code)"></Card>
					<view class="prompt" v-show="item.card_state == 2">注意：上传内容非法，不予通过，请重新修改后重新审核</view>
					<view class="Auditingcode" v-show="item.card_state == 0">审核码：{{ item.card_code }}</view>
					<view class="buttoms">
						<view class="fill" v-show="item.card_state == 0||item.card_state == 2" @tap="toeditcard(item.card_code)">编辑</view>
						<view class="fill" v-show="item.card_state == 0||item.card_state == 2" @tap="copylink(item.system_card_url)">复制卡片链接</view>
						<view class="customerService" v-show="item.card_state == 0" @tap="service(item.card_code )">客服审核</view>					

						<!-- <view class="fill" v-show="item.card_state==1||item.card_state==3">数据</view> -->
						<view class="fill" v-show="item.card_state==1||item.card_state==3||item.card_state == 2" @tap="service(item.card_code )">联系客服</view>
						<view class="customerService" v-show="item.card_state==1" @tap="copylink(item.system_card_url)">复制卡片链接</view>
						<view class="customerService" v-show="item.card_state==3" @tap="tocardState(item.card_code)">激活卡片</view>
					</view>
				</view>
				
			</view>
			<!-- 显示上拉加载提示 -->
			<view class="loading" v-show="showLoading">{{loadingtext}}</view>
		</scroll-view>
	</view>
</template>

<script>
import { onGotApiData , getService } from '../../utils/api.js';
import Card from '../../components/lists/card.vue'
export default {
	data() {
		return {
			userId:'',
			cardListvalue: [], // 获取到的值
			total:0, //返回的总数
			cardnum:{}, //卡片对应的数量
			page:1,//页数
			showLoading:false,//是否正在加载
			Listconut:0, //总条数
			loadingtext:'加载中....', //加载文字
			servicevalue:{}, //返回的客服信息

		}
	},
	components: {
		'Card': Card
	},
	onLoad(){
		this.userId = uni.getStorageSync('dysx_userId')||''

		// 获取客服的接口
		this.getservicelink()
	},
	onShow(){
		console.log('show')
		// 获取到自己卡片的列表
		this.getcardList()
		//获取到对应的卡片数量
		this.getCardNum()
	},
	onReady(){

	},
	onUnload(){

	},
	methods: {	
		// 跳转到首页创建卡片
		toindex(){
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 获取卡片列表
		getcardList () {
			const params = {
				user_id: this.userId,
				page:this.page,
				size:10,
			}
			onGotApiData('/wxxcx_api/card/v1/page_list','GET',params,this.getcardList_value)
		},
		// 获取卡片列表结果
		getcardList_value (result) {
			console.log('result',result)
			this.cardListvalue = result.data.list
			this.total = result.data.total
		},
		// 加载更多的列表	
		more(){
			 // 判断是否正在加载中，避免重复触发加载
			if(this.showLoading) {
				return;
			}
			this.showLoading = true
			this.Listconut =  this.cardListvalue.filter(item => typeof item === 'object').length;
			console.log('当前已经加载的总条数是多少',this.Listconut)
			if(this.Listconut < this.total){
				this.page ++
				const params = {
					user_id: this.userId,
					page:this.page,
					size:10,
				}
				onGotApiData('/wxxcx_api/card/v1/page_list','GET',params,this.pushcardList_value)
			}else{
				this.loadingtext = '没有更多数据了...'
			}
			setTimeout(()=>{
				// 隐藏加载中提示
				this.showLoading = false; 
			},2000)
		},
		// 追加的列表
		pushcardList_value(result){
			console.log('追加的结果',result)
			this.cardListvalue.push(...result.data.list)
		},
		//获取卡片列表的数量
		getCardNum () {
			const params = {
				user_id: this.userId,
			}
			onGotApiData('/wxxcx_api/card/v1/list_data','GET',params,this.getCardNum_value)
		},
		// 获取卡片列表的数量结果
		getCardNum_value (result) {
			console.log('我是卡片数量的结果')
			this.cardnum = result.data
		},
		// 吊起获取客服联系客服接口
		getservicelink () {
			let params = {
			}
			onGotApiData('/wxxcx_api/kf/get','GET',params,this.service_value)
		},
		// 吊起客服接口的结果
		service_value (result) {
			console.log('吊起客服接口的结果',result)
			if(result.code == 200){
				this.servicevalue = result.data
			}
		},
		// 点击联系客服
		service(code) {
			console.log('客服信息',this.servicevalue)
			// 复制文本到剪切板
			uni.setClipboardData({
				data: code,
				success: function() {
					uni.showToast({
						title: '审核码复制成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					// console.log('复制成功')
				}
			})
			const that = this
			// window.location.href = 'https://work.weixin.qq.com/kfid/kfc57df3bacfa1fd3f9'

			wx.openCustomerServiceChat({
				extInfo: {url: `${that.servicevalue.kf_link}`},
				corpId: that.servicevalue.corpId,
				success(res) {
					console.log("我是客服",res)
				},
				fail(res){ 
					console.log("我是失败客服",res)
				}
			})
		},
		// 复制卡片链接
		copylink(url){
			// 复制文本到剪切板
			uni.setClipboardData({
				data: url,
				success: function() {
					uni.showToast({
						title: '卡片链接复制成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			})
		},
		// 跳转到卡片状态
		tocardState(code){	
			uni.navigateTo({
				url: '/pages/cardState/cardState?card_code=' + code
			});
		},
		// 跳转到查询二维码页面
		lookimg(code){
			// console.log('xxx')
			uni.navigateTo({
				url: '/pages/qrcode/qrcode?card_code=' + code
			});
		},
		// 跳转到编辑页面
		toeditcard(code){
			uni.navigateTo({
				url: '/pages/editcard/editcard?card_code=' + code
			});
		},
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		// width: 750rpx auto;
		background: linear-gradient(90deg, rgba(227, 234, 252, 1) 0%, rgba(176, 197, 255, 1) 100%);
		.scroll-Y {
			height: 100vh;
			// border: 1px solid black;
		}
		.container_hader{
			width: 750rpx;
			padding-top: 10rpx;
			height: 180rpx;
			margin: 0 auto;
			// border: 1px solid black;
			background: linear-gradient(180deg, rgba(115, 149, 250, 1) 0%, rgba(68, 114, 252, 1) 75.7%, rgba(115, 149, 250, 0) 100%);
			.hader{
				width: 710rpx;
				height: 150rpx;
				border-radius: 12rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: -4px 5px 8px  rgba(128, 128, 128, 0.25);
				margin: 0 auto;
				margin-top: 0rpx;
				display: flex;
				.hader_item{
					width: 175rpx;
					height: 100rpx;
					border-right: 1px solid rgba(242, 242, 242, 1);
					margin-top: 25rpx;
					.hader_tit{
						width: 175rpx;
						height: 40rpx;
						text-align: center;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);
					}
					.number{
						width: 175rpx;
						height: 50rpx;
						text-align: center;
						font-size: 40rpx;
						// font-size: 28rpx;
						line-height: 70rpx;
						color:rgba(0, 0, 0, 1);
						.span1{
							font-size: 28rpx;
						}
					}
				}
			}   
		}
		.main_null{
			width: 710rpx;
			height:800rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			// background-color:pink;
			.img{
				width: 500rpx;
				height: 400rpx;
				margin: 100rpx 100rpx 0 100rpx;
				// border: 1px solid black;
			}
			.null_text{
				width: 300rpx;
				height: 40rpx;
				margin:  0 auto;
				margin-top: -30rpx;
				line-height: 40rpx;
				text-align: center;
				color: rgba(128, 128, 128, 1);
				// border: 1px solid black;
			}
			.null_card{
				width: 550rpx;
				height: 90rpx;
				border-radius: 30px;
				background: rgba(91, 121, 252, 100);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 100rpx;
			}
		}
		.main{
			width: 740rpx;
			margin: 0 auto;
			margin-top: 0rpx;
			background-color: transparent;
			// background-color: pink;
			.notActive{
				width: 740rpx;
				// height: 450rpx;
				margin: 0 auto;
				margin-bottom: 12rpx;
				padding-bottom: 6rpx;
				border-radius: 10rpx;
				background-color: rgba(242, 242, 242, 1);
				.title{
					width: 740rpx;
					height: 80rpx;
					// background-color: pink;
					display: flex;
					justify-content: space-between;
					.notActive_tit{
						width: 500rpx;
						height: 60rpx;
						font-size: 28rpx;
						font-weight: 700;
						line-height: 60rpx;
						padding-top: 10rpx;
						margin: 0 0 10rpx 14rpx;
						color: rgba(56, 56, 56, 1);
						text-align: left;
					}
					.tit_fail{
						width: 160rpx;
						height: 40rpx;
						border-radius:  0 0 0 10rpx;
						border-radius: 0px 6px, 0px, 4px;
						background: rgb(188, 187, 187);
						font-size: 24rpx;
						line-height: 40rx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
					.Unaudited{
						width: 360rpx;
						height: 40rpx;
						border-radius:  0 0 0 10rpx;
						border-radius: 0px 6px, 0px, 4px;
						background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);
						font-size: 22rpx;
						line-height: 40rx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
					.normal{
						width: 160rpx;
						height: 60rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 60rpx;
						padding-top: 10rpx;
						margin: 0 0 10rpx 14rpx;
						color: rgba(5, 51, 255, 1);
						text-align: center;
					}
					.overdue{
						width: 260rpx;
						height: 40rpx;
						border-radius:  0 0 0 10rpx;
						border-radius: 0px 6px, 0px, 4px;
						background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);
						font-size: 24rpx;
						line-height: 40rx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}

				.prompt{
					width: 740rpx;
					height: 40rpx;
					font-size: 26rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					line-height: 40rpx;
					color: rgba(128, 128, 128, 1);
					text-align: center;	
				}
				.Auditingcode{
					width: 700rpx;
					height: 40rpx;
					font-size: 32rpx;
					line-height: 40rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					color: rgba(255, 87, 51, 1);
				}
				.buttoms{
					width: 710rpx;
					height: 70rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					// border: 1px solid black;
					display: flex;
					justify-content: flex-end;
					.fill{
						// width: 200rpx;
						height: 56rpx;
						padding: 0 30rpx;
						border-radius: 30px;
						margin-left: 30rpx;
						border: 1px solid rgba(71, 105, 255, 1);
						font-size: 28rpx;
						line-height: 56rpx;
						color: rgba(71, 105, 255, 1);
						text-align: center;
					}
					.customerService{
						height: 56rpx;
						padding: 0 30rpx;
						border-radius: 30px;
						margin-left: 30rpx;
						background-color: rgba(91, 121, 252, 100);
						border: 1px solid rgba(71, 105, 255, 1);
						font-size: 28rpx;
						line-height: 56rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}
			}
		}
		.loading{
			width: 750rpx;
			height: 60rpx;
			background-color: rgb(195, 192, 192);
			text-align: center;
			line-height: 60rpx;
		}
	}	
</style>
 